<template>
  <div class="bigDiv">
    <div id="div1">《三年级》</div>
    <div id="content">
      <div>
        <img
          src="https://pic1.imgdb.cn/item/6347a80a16f2c2beb143696c.jpg"
          alt=""
          id="imgs"
        />
      </div>
      <div>
        <ul>
          <li @click="goConputed('/computedFirst',contentCount,8)">万以内的加减法</li>
          <li @click="goConputed('/computedFirst',contentCount,9)">多位数乘一位数</li>
          <li @click="goConputed('/computedFirst',contentCount,10)">两位数乘两位数</li>
          <li @click="goTo('/timeColck',contentCount)">时、分、秒的认识</li>
          <li @click="goConputed('/computedFirst',contentCount,11)">除数是一位数的除法</li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { myHandleSpeak, handleStop } from "@/utils/speack";
export default {
  props:["btnColor"],
  data(){
   return{
     contentCount:"小朋友，请根据随机出的题目输出相应的小棒，点击后颜色为绿色就是选中，选择对应颜色提交后即可！！"
   }
  },
  methods: {
    goTo(address,content){
     this.$router.push(`${address}`)
     this.$store.commit("ISLOOK",false)
     myHandleSpeak(content)
    },
    goConputed(address,content,number){
      this.$store.commit("ISLOOK",true)
    this.$router.push(`${address}`)
     this.$store.commit("CONPUTEDMETHOD",number)
     myHandleSpeak(content)
    }
  },
};
</script>

<style lang="less" scoped>
.bigDiv {
  border-radius: 15px;
  width: 96vw;
  margin-top: 3vh;
  height: 35vh;
  background: rgb(117, 126, 177);
  color:aliceblue;
  #div1{
    font-weight: bold;
    font-size: 20px;
    letter-spacing: 2px;
    line-height: 8vh;
  }
  #content {
    display: flex;
    width: 100%;
    height: 25vh;
    justify-content: center;
    align-items: center;
    #imgs{
      width: 35vw;
      height: 22vh;
    }
    ul{
      padding: 10px;
      li{
      list-style-type:none;
      // text-align: left;
      letter-spacing: 2px;
      }
     
    }
  }
}
</style>